<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>PDF 逐页加载预览</title>
    <!-- 引入 PDF.js 库的 CDN 链接 -->
    <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/build/pdf.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/build/pdf.worker.js"></script>
    <style>
        #pdf-container {
            width: 100%;
            height: auto;
        }

        canvas {
            border: 1px solid gray; /* 方便查看canvas位置 */
        }
    </style>
</head>

<body>
<div id="pdf-container"></div>
<script>
    // 配置 PDF.js 的 worker 路径
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/build/pdf.worker.js';
    // 后端接口地址，注意替换为实际的地址
    const backendUrl = 'http://localhost:8080/convertB';
    // 前端请求参数中的 filePath 值，注意替换为实际的文件地址
    const filePath = 'C:/Users/wxf/Downloads/zbc.pptx';
    // 构建完整的请求 URL
    const fullUrl = `${backendUrl}?filePath=${encodeURIComponent(filePath)}`;

    // 使用Fetch API获取数据
    fetch(fullUrl)
        .then(response => {
            if (!response.ok) {
                throw new Error(`请求失败，状态码: ${response.status}`);
            }
            return response.body.getReader();
        })
        .then(reader => {
            const decoder = new TextDecoder('utf-8');
            const processChunk = async () => {
                const { value, done } = await reader.read();
                if (done) {
                    return;
                }
                const chunk = decoder.decode(value, { stream: true });
                // 这里可以尝试将接收到的chunk数据转换为Uint8Array，用于pdfjsLib处理
                const uint8Array = new Uint8Array(value);
                const loadingTask = pdfjsLib.getDocument({
                    data: uint8Array,
                    disableAutoFetch: true
                });

                loadingTask.promise.then(pdf => {
                    const numPages = pdf.numPages;
                    const container = document.getElementById('pdf-container');
                    for (let pageNumber = 1; pageNumber <= numPages; pageNumber++) {
                        (async () => {
                            try {
                                const page = await pdf.getPage(pageNumber);
                                console.log(`已收到第 ${pageNumber} 页的PDF数据，开始渲染`);
                                const scale = 1;
                                const viewport = page.getViewport({ scale: scale });
                                const canvas = document.createElement('canvas');
                                canvas.id = `page - ${pageNumber}`;
                                const context = canvas.getContext('2d');
                                canvas.height = viewport.height;
                                canvas.width = viewport.width;
                                const renderContext = {
                                    canvasContext: context,
                                    viewport: viewport
                                };

                                console.log(`开始渲染第 ${pageNumber} 页，即将等待渲染Promise`);
                                await page.render(renderContext).promise;
                                console.log(`第 ${pageNumber} 页渲染完成`);

                                setTimeout(() => {
                                    console.log(`准备添加第 ${pageNumber} 页的canvas到容器`);
                                    container.appendChild(canvas);
                                    console.log(`第 ${pageNumber} 页的canvas已添加到容器`);
                                }, 0);
                            } catch (error) {
                                console.error(`处理第 ${pageNumber} 页时出错:`, error);
                            }
                        })();
                    }
                });
                return processChunk();
            };
            return processChunk();
        })
        .catch(error => {
            console.error('请求或处理数据出错:', error);
        });
</script>
</body>

</html>